<template>
    <div>
        <header>
            <div>
                <van-icon  class="headericon" name="arrow-left" @click="handleBackPage" /><span>话题</span><span></span>
            </div>
            <ul>
                <li :class="{active:isShow}" @click="isShow=true">
                    <a>口碑最佳</a>
                    <span></span>
                </li>
                <li :class="{active:!isShow}"  @click="isShow=false">
                    <a>精选导购</a>
                    <span></span>
                </li>
            </ul>
        </header>
         <transition>
            <Accept v-if="isShow"/>
            <Guide v-else/>
        </transition>
    </div>
</template>

<script>
import Accept from '../components/Accept.vue'
import Guide from '../components/Guide.vue'
    export default {
        data() {
            return {
                isShow: false
            }
        },
        components:{
             Accept,
              Guide
        },
    }
</script>

<style lang="less" scoped>
     header{
         position: fixed;
         width: 100%;
         background: white;
         z-index: 1000;
         div{
             height: .38rem;
             font-size: .16rem;
             color: #171717;
             display: flex;
             padding:0 .1rem;
             justify-content: space-between;
             align-items: center;
             .headericon{
                 font-size: .25rem;
                 color: #aaa;
             }
         } 
         ul{
             height:.56rem;
             display: flex;
             justify-content: center;
             li{
                width: 1.24rem;
                height: .56rem;
                text-align: center;
                line-height:.56rem;    
                font-size: .16rem;
                position: relative;
                a{
                    color:#949494;  
                }  
                &.active a{
                    color: #171717;
                }    
                span{
                    width:100%;
                    height:.03rem;
                    background:#ff5900;
                    position:absolute;
                    left:0;
                    bottom:0;
                    display: none;
                }  
                &.active span{
                    display: block;
                }
             }
         }
    }
</style>